<!--
 * @Description: 添加组件，蒙层对话框
 * @Author: youzi
 * @Date: 2020-05-20 14:11:14
 * @LastEditors: youzi
 * @LastEditTime: 2020-09-30 10:39:34
-->
<template>
  <modal :visible="visible" title="新增" okText="保存" @cancelHandler="onClose" @okHandler="handleSubmit">
    <template slot="content">
      <a-spin :spinning="loading" :delay="200" tip="提交中...">
        <a-form :form="form">
          <a-form-item label="标签" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'title',
                { rules: [{ required: true, message: '公告标题不能为空' }, { max: 50, message: '字数不能超过50字' }] }
              ]"
            />
          </a-form-item>
        </a-form>
      </a-spin>
    </template>
  </modal>
</template>
<script>
import modal from '~/tool/modal';

export default {
  name: 'tags',
  components: { modal },
  props: {
    visible: {
      default: false
    },
    // 新增记录
    apiURL: {
      type: Object,
      default: () => ({})
    },
  },
  data() {
    return {
      loading: false,
      formItemLayout,
      form: this.$form.createForm(this),
      // 小品类集合
    };
  },
  methods: {
    // ---------------------- 界面交互事件 -------------------------
    // 重置
    reset() {
      this.loading = false;
      this.renderData = JSON.parse(JSON.stringify(renderData));
      this.form.resetFields();
    },
    // 关闭弹窗
    onClose() {
      this.$confirm({
        title: '确定放弃编辑吗？',
        content: '',
        okText: '确定',
        cancelText: '取消',
        onOk: this.onCloseConfirm
      });
    },
    // 确定关闭弹窗
    onCloseConfirm() {
      this.reset();
      this.$emit('close');
    },
    // 新增提交
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$confirm({
            title: '确定保存吗？',
            content: '',
            okText: '确定',
            cancelText: '取消',
            onOk: this.handleConfirmSubmit
          });
        }
      });
    },
    // 确定新增提交
    handleConfirmSubmit() {
      let that = this;
      this.loading = true;
      let tmpObj = this.form.getFieldsValue();
      this.renderData.forEach(el => {
        if (!!el.fileList.length) {
          let tmpList = [];
          el.fileList.forEach(file => {
            tmpList.push(file.id);
          });
          let tmpStr = tmpList.join(',');
          tmpObj[el.dataIndex] = tmpStr;
        }
      });
      console.log(tmpObj);
      for (var i = 0; i < that.users.length; i++) {
        var user = that.users[i];
        if (tmpObj.operatorId == user.userId) {
          tmpObj.operatorName = user.username;
        }
      }
      tmpObj.status = 1
      this.$post(this.apiURL.addRecords, {
        ...tmpObj
      }).then(r => {
        this.reset();
        this.$emit('success');
      }).catch(() => {
        this.loading = false;
      });
    },
  },
  watch: {}
};
</script>
